<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/12/29
  Time: 8:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link type="text/css" href="../layui/css/layui.css" rel="stylesheet">
    <script type="text/javascript" src="../layui/layui.js"></script>
    <style type="text/css">
        /*.layui-table-cell{
            height:auto!important;
            white-space:normal;
        }*/
        .layui-table-cell{
            text-align:center;
            height: auto!important;
            white-space: normal;
        }
        .layui-table img{
            max-width: 120PX
        }
    </style>
    <script type="text/javascript">
        layui.use(['layer', 'form',"table","jquery","upload"], function(){
            var layer = layui.layer
            var form = layui.form;
            var table=layui.table
            var $=layui.jquery
            var upload = layui.upload;
            table.render({
                elem:"#role"
                ,url:"${pageContext.request.contextPath}/selectRoleByPage"
                ,toolbar:"#toolbarDemo"
                ,page:true
                ,cols:[[
                    {field:"id",title:"编号",align:"center"}
                    ,{field:"name",title:"角色名字",align:"center"}
                    ,{title:"操作",templet:"#caoZuoTemplet",align:"center"}
                ]]
            })
            table.on('toolbar(roleFilter)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                var name=$("#nameInput").val()
                if (obj.event=="add") {
                    //alert("ooo")
                    //form.render();
                    //清空form表单
                    //form.val("formFilter",{"bannerOldName":"","bannerImageUrl":"","bannerDescription":""});
                    $("#addform")[0].reset()
                    layer.open({
                        type: 1,
                        content: $('#addform')
                        /*,end:function(){
                            window.location.reload();
                        }*/

                    })


                }
                /*监听添加工具栏======end*/


                /*监听提交======end*/
            });

            form.on('submit(submitFilter)', function(data){
                //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                $.ajax({
                    url:"${pageContext.request.contextPath}/insertRole",
                    data:data.field,
                    success:function (data) {
                        if (data.isAdd) {
                            //关闭弹出框
                            layer.closeAll()
                            //重载table
                            table.reload('role');
                        }else {
                            console.log(data)
                            if (data.message == null) {
                                layer.open({
                                    content: "输入有误,请重新输入"
                                });
                            } else {
                                layer.open({
                                    content: data.message
                                });
                            }
                        }
                    }

                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });

            //监听行工具栏
            table.on('tool(roleFilter)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                if(layEvent === 'del'){ //删除
                    layer.confirm('真的删除行么', function(index){

                        //向服务端发送删除指令
                        $.ajax({
                            url:"${pageContext.request.contextPath}/deleteRole",
                            data:{"id":data.id}
                            ,success:function (data) {
                                if (data.message == null) {
                                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                                    layer.close(index);
                                    layer.open({
                                        content: "输入有误,请重新输入"
                                    });
                                } else {
                                    layer.open({
                                        content: data.message
                                    });
                                }
                            }
                        })
                    });
                } else if(layEvent === 'edit'){ //编辑
                    //console.log(data.departmentId)
                    //发送ajax根据id查对象
                    $.ajax({
                        url:"${pageContext.request.contextPath}/selectOneRole"
                        ,data:{"id":data.id}
                        ,async: false
                        ,success:function (data) {
                            //给表单赋值
                            // alert(data)
                            //console.log(data.banner)
                            form.val('updateFormFilter', data.role);

                        }
                    })

                    //弹出修改表单
                    layer.open({
                        type: 1,
                        content: $('#updateForm') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        /*,end:function(){
                            window.location.reload();
                        }*/
                    });

                }
            });
            /*//监听行工具栏=========end*/


            //监听修改状态修改表单内容
            form.on('submit(updateSubmitFilter)', function(data){
                /*console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}*/
                $.ajax({
                    url:"${pageContext.request.contextPath}/updateRole"
                    ,data:data.field
                    ,success:function (data) {
                        if (data.isUpdate) {
                            var msg = "修改成功";
                            layer.closeAll();
                            table.reload('role');
                            layer.msg(msg)
                        } else {
                            if (data.message == null) {
                                layer.open({
                                    content: "输入有误,请重新输入"
                                });
                            } else {
                                layer.open({
                                    content: data.message
                                });
                            }
                        }

                    }
                })
                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });



        });

    </script>

    <!--/*自定义行操作模板*/-->
    <script type="text/html" id="caoZuoTemplet">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <!--/*自定义头工具栏模板*/-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-inline">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        </div>
    </script>
</head>
<body>
<table id="role" lay-filter="roleFilter"></table>

<!--//添加表单-->
<form class="layui-form" style="display: none;" id="addform" method="post" enctype="multipart/form-data" lay-filter="formFilter"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">角色名称:</label>
        <div class="layui-inline">
            <input type="text" name="name" lay-verify="required" placeholder="请输入原有名称"  class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="submitFilter" id="addSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>


<!--//修改表单-->
<form class="layui-form" style="display: none;" id="updateForm" lay-filter="updateFormFilter"> <!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
    <div class="layui-form-item">
        <label class="layui-form-label">角色名称:</label>
        <div class="layui-inline">
            <input type="hidden" name="id" value="${id}">
            <input type="text" name="name" lay-verify="required" placeholder="请输入原有名称"  class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="updateSubmitFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
    <!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
</form>
</body>
</html>
